$(function () {
    // 版头
    new Typed($('.zddz')[0], {
        // 注意：输出的可以是标签，将标签当节点运行。比如下面的h2
        strings: [' 一站式 <i>应用管理</i> 省时 高效 低成本.'],
        typeSpeed: 80 // 速度
    });




    // 轮播图
    // var i = 0;
    // var c = null;
    // c = setTimeout(carousel, 1000);//开始执行
    // function carousel() {

    //     clearTimeout(c);//清除定时器

    //     $("#pic" + i).removeClass("active");
    //     $("#pic" + (i + 1)).addClass("active");
    //     i++;
    //     $("ol li").removeClass("active");
    //     $("ol li:eq(" + i + ")").addClass("active");

    //     if (i > 4) {
    //         $("#pic" + (i - 1)).removeClass("active");
    //         $("#pic0").addClass("active");
    //         i = 0;
    //         $("ol li:eq(" + i + ")").addClass("active");

    //     }
    //     c = setTimeout(carousel, 1000); //设定定时器，循环执行             
    // }

    // 1.获取view
    var oView = document.querySelector('.content_slideshow');
    // 2.获取view的宽度
    var viewWidth = oView.offsetWidth;
    // 3.获取ul
    var oUl = document.querySelector('.content_slideshow ul');

    // 功能: 写小圆点(li)导航(ol)(小圆点共有6个 那么ul中的li右6个 如果你写在插入li之后 ul中的li有7个 不好写 一定要写在第一个li被插入之前)

    // 1.获取ol元素
    // var oOl = document.createElement('.dots');
    var oOl = document.querySelector('.dots');
    // 2.把ol插入到view里面
    oView.appendChild(oOl);
    // 3.遍历ul中的所有li(ul中有几个li 就要在ol中创建几个li)
    for (var i = 0; i < oUl.children.length; i++) {
        // 4.获取ol中的li
        // var li = document.createElement('.dots li');
        var li = document.querySelector('.dots li')
        // 5.设置li的内容
        li.innerHTML = i + 1;
        // 6.设置li的自定义属性index
        li.setAttribute('index', i);
        oOl.appendChild(li);
    }

    // 7.找到ol中的第一个子元素设置class为active
    oOl.children[0].className = 'active';

    // 4.获取第一个li
    var firstLi = oUl.querySelector('li:first-child');

    // 5.把第一个li添加到ul里面的的最后 (克隆(复制 clone) 多利羊)
    // firstLi.cloneNode(true) 把fistLi元素复制一份  
    // ture代表是不是包括li中的所有子元素和内容 flase代表不包括所有子元素 只有自己
    oUl.appendChild(firstLi.cloneNode(true));
    // 6.获取左边按钮
    var prevBtn = document.querySelector('.rigth');
    // 7.获取右边按钮
    var nextBtn = document.querySelector('.left');
    // 8.声明一个计数变量
    var num = 0;

    var timeId = setInterval(fn, 2000)


    function fn() {
        // 9.4 判断 计数变量是否 等于 li的length-1
        if (num == oUl.children.length - 1) {
            // 9.5 让num 为0
            num = 0;
            // 9.6 让ul的移动距离为0
            oUl.style.left = 0 + 'px';
        }
        // 9.2 让计数变量 自增
        num++;
        // 9.3 让ul移动
        animate(oUl, -num * viewWidth);

        // 功能: 点击左边边按钮的时候 让小点导航 对应的数字高亮
        // num一定要大于 因为如果等于相当于没有超过小圆点的个数
        if (num > oOl.children.length - 1) {
            // 去除掉最后一个li的class置空
            oOl.children[oOl.children.length - 1].className = "";
            // 让第一个选中
            oOl.children[0].className = 'active';
        } else {
            // 1.遍历ol中所有的li
            for (var j = 0; j < oOl.children.length; j++) {
                // 2.移除li中所有的class属性
                oOl.children[j].removeAttribute('class');
            }

            // 3.给索引为num的li添加class为active
            oOl.children[num].className = 'active';
        }
    }
    // 9.点击左边按钮 让轮播图向左移动
    // 9.1 给左边按钮添加点击事件
    prevBtn.onclick = fn;

    // 10.点击右边按钮 让轮播图向右移动
    // 10.1 给右边按钮添加点击事件
    nextBtn.onclick = function () {
        // 10.4 判断计数变量是否等于0
        if (num == 0) {
            // 10.5 让num 为oUl.children.length - 1
            num = oUl.children.length - 1;
            // 10.6 oUl.style.left为 -num*viewWidth
            oUl.style.left = -num * viewWidth + 'px';
        }

        // 10.2让计数变量自减
        num--;
        // 10.3让ul移动
        animate(oUl, -num * viewWidth);


        // 功能: 点击右边按钮的时候 让小点导航 对应的数字高亮
        // 1.遍历ol中所有的li
        for (var j = 0; j < oOl.children.length; j++) {
            // 2.移除li中所有的class属性
            oOl.children[j].removeAttribute('class');
        }

        // 3.给索引为num的li添加class为active
        oOl.children[num].className = 'active';
    }
    // 鼠标移入 让轮播图暂停
    oView.onmouseover = function () {
        clearInterval(timeId);
    }
    // 鼠标移出 让轮播图继续
    oView.onmouseout = function () {
        timeId = setInterval(fn, 2000);
    }
    new Typed($('.zddz')[0], {
        // 注意：输出的可以是标签，将标签当节点运行。比如下面的h2
        strings: [' 一站式 <i>应用管理</i> 省时 高效 低成本.'],
        typeSpeed: 80 // 速度
    });






    // tab切换
    // 3.1 获取所有的a标签
    var aLink = document.querySelectorAll('.new a');

    var aSection = document.querySelectorAll(".section");

    // 3.2 遍历所有a标签
    for (var i = 0; i < aLink.length; i++) {
        // 3.7 给每个a标签设置一个自定义属性 index  值是索引
        aLink[i].setAttribute('index', i);
        // 3.3 给a标签添加点击事件
        aLink[i].onclick = function () {
            for (var j = 0; j < aLink.length; j++) {
                // 3.4 再次遍历 为了让所有a标签不被选中
                aLink[j].removeAttribute('class');
                // 3.5 再次遍历  为了让所有section隐藏
                aSection[j].style.display = "none";
            }
            // 3.6 让点击的a标签选中
            this.className = 'active';
            // 3.8 通过获得a标签上的自定义属性的值 让对应的section显示
            aSection[this.getAttribute('index')].style.display = 'block';
        }
    }




    // 底部搜索
    // 获取滚动条超出范围
    function getScroll() {
        return {
            left: window.document.body.scrollLeft || window.document.documentElement.scrollLeft || window.pageXOffset || 0,
            top: window.document.body.scrollTop || window.document.documentElement.scrollTop || window.pageYOffset || 0
        };
    }
    //获取需要滚动的高度    这里需要改一下
    let num12 = $('.banner')[0].offsetHeight + $('.product_core')[0].offsetHeight - $('.started')[0].offsetHeight * 2;
    //   滚动事件
    window.onscroll = function () {
        if (getScroll().top >= num12) {
            $('.js-gotop').animate({
                opacity: 1,
                right: 0
            }, 1000)
            // jquery动画
            $('.started_title h1').animate({
                top: 0,
                opacity: 1
            }, 1200, function () {
                $('.started_title p').animate({
                    top: 0,
                    opacity: 1
                }, 800, function () {
                    $('.started_search form').animate({
                        top: 0,
                        opacity: 1
                    }, 600)
                })
            })
        }
    }

    // 返回顶部
    $("#btn").click(function () {
        $("html,body").animate({ scrollTop: 0 }, 1000)
    })
})